.data-table {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    &__card {
        height: 100%;
        display: flex;
        flex-direction: column;
        
        .ant-card-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 16px;
            overflow: hidden;
        }
    }
    
    &__header {
        margin-bottom: 16px;
    }
    
    &__title {
        margin: 0 !important;
    }
    
    &__filters {
        margin-bottom: 16px;
    }
    
    &__search-input {
        width: 100%;
        margin-bottom: 16px;
    }
    
    &__content {
        flex: 1;
        overflow: auto;
    }
    
    &__table {
        .ant-table-wrapper {
            height: 100%;
        }
        
        .ant-table {
            height: 100%;
        }
        
        .ant-pagination {
            margin-bottom: 0;
        }
    }
    
    // 移除自定义表格样式，使用 Ant Design 的 Table 组件样式
    
    &__empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        padding: 40px 20px;
        
        .ant-empty {
            margin: 32px 0;
        }
        
        &-tip {
            font-size: 12px;
        }
    }
}

// 滚动条样式 - 使用 Ant Design 默认滚动条样式
.data-table__content {
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.15);
        border-radius: 3px;
        
        &:hover {
            background: rgba(0, 0, 0, 0.3);
        }
    }
    
    &::-webkit-scrollbar-corner {
        background: transparent;
    }
}

// 响应式设计 - 使用 Ant Design 的响应式设计

// 表格动画效果 - 使用 Ant Design 的动画效果